import React, { useState } from 'react';
import { IndexBar, List, Popup } from 'antd-mobile';
import Mock from 'mockjs'


// 数据结构 需要自己观察
const data = Mock.mock({
  'groups|26': [{
    "title|+1": 65,
    "items|4-8": [{
      "name": '@cword(2,6)',
      "children|10-20": ["@cword(2,6)"]
    }]
  }]
})

// 转化 65 对应  Ascall码表 对应的  A
data.groups.forEach(v => {
  v.title = String.fromCharCode(v.title)
})

// 数据
const groups = data.groups




export default () => {
  // 弹框展示
  const [visible, setVibible] = useState(false)
  // 弹框数据
  const [propsList, SetPropsList] = useState([])
  function handleClick(item) {
    setVibible(true)
    SetPropsList(item.children)
  }

    return (<div style={{ height: window.innerHeight }}>
      <IndexBar>
        {groups.map(group => {
            const { title, items } = group;
            return (<IndexBar.Panel index={title} title={title} key={title}>
              <List>
                {items.map((item, index) => (<List.Item key={index} arrow={ false }  onClick={ () => handleClick(item) }>{item.name}</List.Item>))}
              </List>
            </IndexBar.Panel>);
        })}
      </IndexBar>
      {/* 侧边弹框 */}
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVibible(false)
        }}
        position='right'
        bodyStyle={{ minWidth: '60vw' }}
      >
        <List>
          {propsList.map((item, index) => (<List.Item key={index}>{item}</List.Item>))}
        </List>
      </Popup>
    </div>);
};
